import { useEffect, useState } from "react";
import { FieldTimeOutlined } from "@ant-design/icons";
import styles from "./index.module.scss";
import testImg from "@/assets/images/test.jpg";
import { NavLink } from "react-router-dom";
import { getNews } from "@/request/api";
import { getFormatTime } from "@/utils";

export default function News() {
  const [dataSource, setDataSource]: any = useState([]);
  useEffect(() => {
    getNews().then((res: any) => {
      setDataSource(res.news);
    });
  }, []);

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        backgroundColor: "#c1e1fd",
        minHeight: "100vh",
      }}
    >
      <div className={styles.left}>
        <img src={testImg} />
        <div className={styles.title}>NEWS</div>
      </div>
      <div className={styles.right}>
        {dataSource.map((item: any) => {
          return (
            item.status === "published" && (
              <div className={styles.newsData} key={item.id}>
                {item.cover && (
                  <div>
                    <img
                      src={`http://10.106.8.197:9000/lanmei/${item.cover}`}
                    />
                  </div>
                )}
                <div>
                  <div className={styles.title}>{item.title}</div>
                  <div className={styles.time}>
                    <FieldTimeOutlined style={{ marginRight: "10px" }} />
                    {getFormatTime(item.created_at)}
                  </div>

                  <NavLink to={`${item.id}`} className={styles.content}>
                    <div dangerouslySetInnerHTML={{ __html: item.content }} />
                  </NavLink>
                </div>
              </div>
            )
          );
        })}
      </div>
    </div>
  );
}
